<template>
  <div class="container">
    <div class="header">
      <div class="row mt-5 d-flex flex-column gap-4 justify-content-center adoptHeader">
        <div class="col-12 col-md-12">
          <div class="card mb-4 shadow-sm d-flex flex-column flex-md-row gap-4 border-0">

            <!-- <img class="adoptHeaderImg img-fluid" src="../../assets/images/mm6.jpg" alt=""> -->
            <div class="col-12 col-md-5 img-fluid adoptHeaderImgF">
              <img class="adoptHeaderImg img-fluid" src="../../assets/images/mm6.jpg" alt="">
            </div>


            <div class="card-body card-body-mm">
              <div class="d-flex flex-column align-items-left gap-2">
                <h3 class="adopt-name">领养一个宠物</h3>
                <p class="description">
                  收养一个宠物不仅能够给动物带来新的希望和温暖的家，也能为您的生活增添无尽的欢乐与陪伴。每一个小生命都值得被爱，通过收养，您可以给予它们第二次机会，体验彼此之间的深厚情谊。无论是一只活泼的小猫还是一条忠诚的狗狗，它们都将用自己独特的方式回报您的关爱。
                </p>
                <h3 class="adopt-name">收养的意义</h3>
                <ul class="d-flex flex-column gap-3">
                  <li> <i class="el-icon-arrow-right"></i> &nbsp;&nbsp;选择适合您生活方式的宠物。</li>
                  <li> <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;了解不同品种的特点和需求。</li>
                  <li> <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;准备必要的用品和空间迎接新成员。</li>
                  <li> <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;关注宠物健康，定期进行体检和疫苗接种。</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search-container mt-3">
      <el-form @submit.native.prevent="onSubmit">
        <el-row :gutter="25" class="d-flex flex-wrap justify-content-center">
          <!-- 品种 -->
          <el-col :md="7" :sm="24" :xs="24">
            <el-form-item label="">
              <el-select v-model="form.breed" placeholder="请选择品种" style="width: 100%;">
                <el-option v-for="option in breeds" :key="option.value" :label="option.text"
                  :value="option.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 毛色 -->
          <el-col :md="7" :sm="24" :xs="24">
            <el-form-item label="">
              <el-input v-model="form.color" suffix-icon="el-icon-search" placeholder="输入毛色"
                style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>

          <!-- 性别 -->
          <el-col :md="7" :sm="24" :xs="24">
            <el-form-item label="">
              <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%;">
                <el-option v-for="option in genders" :key="option.value" :label="option.text"
                  :value="option.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="25" class="d-flex flex-wrap justify-content-center">
          <!-- 年龄范围 -->
          <el-col :md="7" :sm="24" :xs="24">
            <el-form-item label="">
              <el-input v-model="form.ageRange" suffix-icon="el-icon-info" placeholder="例如: 0-1岁"
                style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>

          <el-col :md="7" :sm="24" :xs="24">
            <el-form-item label="">
              <el-input v-model="form.pupilColor" suffix-icon="el-icon-picture" placeholder="请输入瞳色"
                style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>

          <!-- 搜索按钮 -->
          <el-col :md="7" :sm="24" :xs="24">
            <el-button type="primary" native-type="submit" class="serch-btn" style="width: 100%;">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 领养模块 -->


    <!-- 领养模块 -->
    <div class="row mt-5 adopt">
      <div class="col-12 col-md-4" v-for="(item, index) in pets" :key="index">
        <div class="card mb-4 shadow-sm d-flex flex-column align-items-center gap-2 border-0">
          <div class="adoptImg">
            <img :src="item.image" class="card-img-top" alt="">
          </div>
          <div class="card-body card-body-mm d-flex flex-column  align-items-center">
            <div class="d-flex align-items-center justify-content-center gap-1">
              <h5 class="name">{{ item.name }}</h5>
            </div>
            <p class="text mt-1">{{ item.description }}</p>
            <div class="adoptBtn" @click="toDetail">查看详情</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 品种
        breed: null,
        // 毛色
        color: '',
        // 性别
        gender: null,
        // n年龄
        ageRange: '',
        // 瞳色
        pupilColor: '',
      },
      breeds: [
        { value: null, text: '请选择品种' },
        { value: 'siamese', text: '暹罗猫' },
        { value: 'ragdoll', text: '布偶猫' },
        { value: 'british-shorthair', text: '英短' }
        // 添加更多品种选项
      ],
      genders: [
        { value: null, text: '请选择性别' },
        { value: 'male', text: '雄性' },
        { value: 'female', text: '雌性' }
      ],
      // 用于追踪当前悬停的卡片索引
      hoveredIndex: null,
      pets: [
        {
          name: '喵喵',
          breed: '布偶猫',
          gender: '雌',
          age: '4个月',
          eyeColor: '红',
          furColor: '蓝紫',
          description: '这是一只活泼好动的小猫，名叫小跳。她总是充满好奇心，喜欢探索新环境。小跳特别喜欢追逐玩具和与人互动，非常适合有时间和精力陪伴她的家庭。',
          image: require('../../assets/images/mm1.jpg'),
          iconColor: 'rgba(250,202,193,1)'
        },
        {
          name: '呜呜',
          breed: '暹罗猫',
          gender: '雄',
          age: '6个月',
          eyeColor: '蓝',
          furColor: '棕白相间',
          description: '小花是一只非常聪明且友好的暹罗猫，喜欢跟人类交流，经常用叫声表达自己的需求。它非常适合那些想要一个互动伙伴的家庭。',
          image: require('../../assets/images/mm2.jpg'), // 替换为实际图片路径
          iconColor: 'rgba(250,202,193,1)'
        },
        {
          name: '无无',
          breed: '美国短毛猫',
          gender: '雌',
          age: '1岁',
          eyeColor: '绿',
          furColor: '白色',
          description: '小白性格温顺，是典型的“家猫”，喜欢安静地待在家里。它对家人非常依恋，适合寻找一个温暖的家庭来照顾它。',
          image: require('../../assets/images/mm3.jpg'), // 替换为实际图片路径
          iconColor: 'rgba(250,202,193,1)'
        },
        {
          name: '优优',
          breed: '英国短毛猫',
          gender: '雄',
          age: '2岁',
          eyeColor: '黄',
          furColor: '黑色',
          description: '小黑是一只强壮而独立的猫咪，但它也喜欢偶尔被人抚摸。它喜欢独自玩耍，但也会主动寻求主人的关注和陪伴。',
          image: require('../../assets/images/mm4.jpg'), // 替换为实际图片路径
          iconColor: 'rgba(250,202,193,1)'
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log('Form Submitted:', this.form);
    },
    handleMouseEnter(index) {
      this.hoveredIndex = index;
    },
    handleMouseLeave() {
      this.hoveredIndex = null;
    },
    toDetail() {
      this.$router.push({
        name: 'catatoptDetail',
        params: { id: '123' } // 确保传递了 id 参数
      });
    }
  }
};
</script>

<style scoped>
.adoptHeaderImgF {
  width: 555px;
  height: 416px;
  overflow: hidden;
}

.adoptHeaderImg {
  width: 555px;
  min-height: 416px;
  border-radius: 40px;
  transition: transform 2s ease-in-out;
  /* 添加过渡效果 */
}

.adoptHeaderImg:hover {
  transform: scale(1.2);
}

.adoptHeader .adopt-name {
  font-family: 'Baloo Thambi', sans-serif;
  font-size: 2.5em;
  color: #000;
  line-height: 1em;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.adoptHeader ul {
  line-height: 1.214em;
  text-transform: uppercase;
  font-family: 'Baloo Thambi', sans-serif;
  letter-spacing: -0.4px;
  font-weight: 800;
  padding-left: 0px;
  color: #108896;
  font-size: 14px;
}

.adoptHeader p {
  font-size: 16px;
  font-weight: 400;
  color: #989797;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato', sans-serif;
  text-indent: 2rem;
  line-height: 2rem;
}

/* 如果需要进一步自定义样式 */
.custom-width {
  width: 100%;
}

:deep(.el-input__inner) {
  border: 2px solid rgba(230, 230, 230);
  font-size: 14px;
  font-weight: 600;
  /* color: rgba(108,117,125,.8); */
  /* color: rgba(137,145,151,1); */
  color: rgba(137, 145, 151, .6);
  border-radius: 5px;
  padding: 15px;
  height: 3rem;
}

.serch-btn {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 0px;
  display: inline-block;
  outline: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #01bcb3;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  letter-spacing: 1rem;
}
.serch-btn:hover{
  border: 1px solid #01bcb3;
  background-color: transparent;
  color: #01bcb3;
}

:deep(.el-input__icon) {
  font-size: 1.2rem;
  color: rgba(254, 161, 22, 1);
}

:deep(.el-select .el-input .el-select__caret) {
  font-size: 1rem;
  color: rgba(254, 161, 22, 1);
  font-weight: 600;
}

:deep(.el-input__inner:focus),
:deep(.el-input.is-focus .el-input__inner) {
  border-color: #eee !important;
  /* 更改为所需的边框颜色 */
  outline: none;
}

:deep(.el-select-dropdown__item.selected) {
  color: rgba(254, 161, 22, 1) !important;
  font-weight: 700;
}

.adoptImg {
  width: 300px;
  height: 300px;
}

.adoptImg img {
  display: block;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  /* border-color:; */
  border: 10px solid #ffefd5;
  transition: border .3s ease-in-out;
}

.adopt h5 {
  font-family: 'Baloo Thambi', sans-serif;
  font-size: 2em;
  color: #000;
  line-height: 1em;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}


.adopt p {
  font-size: 16px;
  font-weight: 400;
  color: #989797;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato', sans-serif;
  text-indent: 2rem;
  line-height: 2rem;
  text-align: center;
}

.adopt .adoptBtn {
  width: 7rem;
  border: 0;
  color: #fff;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-family: 'Baloo Thambi', sans-serif;
  font-size: 15px;
  transition: all .3s ease-in-out;
  border-radius: 25px;
  margin-top: 10px;
  letter-spacing: .1rem;
  line-height: 1em;
  padding: 20px 20px;
  text-transform: uppercase;
  background-color: #EF5030;
  box-shadow: inset 9px 0 0 0 #F19F1F;
}

.adopt .adoptBtn:hover {
  background-color: rgba(16, 136, 150, 1);
  animation: shadowMorph 0.9s forwards;
  /* 应用动画 */
}

@keyframes shadowMorph {
  0% {
    box-shadow: inset 9px 0 0 0 #F19F1F;
  }

  100% {
    box-shadow: inset 9px 0 0 0 rgba(16, 136, 150, 1);
  }
}

/* 放大效果 */
.zoom-in {
  transform: scale(1.1);
  /* 放大比例 */
  z-index: 10;
  /* 确保放大的卡片在最前面 */
}
</style>